<template>
    <section>
      <p>
        <span class="right" @click="change()"><img  src="../assets/vary2.png" />简约模式</span>
      </p>
      <div class="main">
        <el-row :gutter="20" id="leftbox">
          <el-col :span="9" :offset="3">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="24">
                  <div class="onechang" id="imgleft1">
                    <p class="titleFont">邮件</p>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div  id="imgleft2" class="twozhong1" >
                    <p class="titleFont">会议室预定</p>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="twozhong1" id="imgleft3">
                    <p class="titleFont">会议室报送管理</p>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="threeduan1" id="imgleft4">
                    <p class="titleFont">通知公告</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="threeduan2" id="imgleft5">
                    <p class="titleFont">内部刊物</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="threeduan3" id="imgleft6">
                    <p class="titleFont">规章制度</p>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="16">
                  <div class="fourtwo1" id="imgleft7">
                    <p class="titleFont">组织架构</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="fourtwo2" id="imgleft8">
                    <p class="titleFont">系统管理</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="9" id='rightbox' >
            <div class="grid-content bg-purple " >
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="twozhong1" id="rightone">
                    <p class="titleFont">待办件</p>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="twozhong1" id="rightone2">
                    <p class="titleFont">待阅件</p>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <div class="onechang" id="righttwo">
                    <p class="titleFont">发布信息</p>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <div class="onechang" id="rightthree">
                    <p class="titleFont">报账信息</p>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="twozhong1" id="rightfour">
                    <p class="titleFont">软件下载</p>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="twozhong1" id="rightfour2">
                    <p class="titleFont">设置管理</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
</template>

<script>

    export default {
        data() {
          return {

          };
        },
        methods: {
          change(){
            this.$router.push({name:'index'});
          }
        }
  };
</script>

<style scoped="scoped">
  .right{
    float: right;
    margin:10px 40px 0 0;
    cursor: pointer;
    font-size: 12px;
    color: #3370d6;
    margin-bottom: 20px;
    line-height: 10px;
    /* padding-top:-20px; */
  }
  #leftbox{
    margin-left:-20px;
  }
  #rightbox{
    margin-left:20px;
  }
  .main{
    width: 100%;
    float: left;
    font-size: 12px;
    /* cursor: pointer; */
  }
  .titleFont{
    padding-top: 128px;
    margin-left: 20px;
    font-weight: bold;
  }
  .onechang{
    width: 100%;
    height: 150px;
    background: url( ../assets/left2.png ) no-repeat center 50%;
    background-color: #0567b4;
    margin-bottom: 5px;
    color: #fff;
    border-radius: 4px;
  }
  .twozhong1{
    width: 100%;
    height: 150px;
    background: #2a579a;
    margin-bottom: 5px;
    color: #fff;
    border-radius: 4px;
  }
  .threeduan1{
    width: 100%;
    height: 150px;
    background: #d44927;
    margin-bottom: 5px;
    color: #fff;
    border-radius: 4px;
  }
  .threeduan2{
    width: 100%;
    height: 150px;
    background: #803a7b;
    margin-bottom: 5px;
    color: #fff;
    border-radius: 4px;
  }
  .threeduan3{
    width: 100%;
    height: 150px;
    background: #1d7143;
    margin-bottom: 5px;
    color: #fff;
    border-radius: 4px;
  }
  .fourtwo1{
    width: 100%;
    height: 150px;
    background: #0567b4;
    margin-bottom: 10px;
    color: #fff;
    border-radius: 4px;
  }
  .fourtwo2{
    width: 100%;
    height: 150px;
    background: #cd4d4d;
    margin-bottom: 10px;
    color: #fff;
    border-radius: 4px;
  }
  #imgleft1{
    background: url( ../assets/left1.png ) no-repeat center ;
    background-color: #0567b4;
    cursor: pointer;
  }
  #imgleft2{
    background: url( ../assets/left2.png ) no-repeat center ;
    background-color: #2a579a;
    cursor: pointer;
  }
  #imgleft3{
    background: url( ../assets/left3.png ) no-repeat center ;
    background-color: #2450a2;
    cursor: pointer;
  }
  #imgleft4{
    background: url( ../assets/left4.png ) no-repeat center ;
    background-color: #d44927;
    cursor: pointer;
  }
  #imgleft5{
    background: url( ../assets/left5.png ) no-repeat center ;
    background-color: #803a7b;
    cursor: pointer;
  }
  #imgleft6{
    background: url( ../assets/left6.png ) no-repeat center ;
    background-color: #1d7143;
    cursor: pointer;
  }
  #imgleft7{
    background: url( ../assets/left7.png ) no-repeat center ;
    background-color: #0567b4;
    cursor: pointer;
  }
  #imgleft8{
    background: url( ../assets/left8.png ) no-repeat center ;
    background-color: #cd4d4d;
    cursor: pointer;
  }
  #rightone{
    background: url( ../assets/right1.png ) no-repeat center ;
    background-color: #0567b4;
    cursor: pointer;
  }
  #rightone2{
    background: url( ../assets/right2.png ) no-repeat center ;
    background-color: #2450a2;
    cursor: pointer;
  }
  #righttwo{
    background: url( ../assets/right3.png ) no-repeat center ;
    background-color: #0567b4;
    cursor: pointer;
  }
  #rightthree{
    background: url( ../assets/right4.png ) no-repeat center ;
    background-color: #5ea6db;
    cursor: pointer;
  }
  #rightfour{
    background: url( ../assets/right5.png ) no-repeat center ;
    background-color: #13853c;
    cursor: pointer;
  }
  #rightfour2{
    background: url( ../assets/right6.png ) no-repeat center ;
    background-color: #464646;
    cursor: pointer;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    /* border-radius: 4px; */
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #ededed;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 336px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
